<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'material.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px" placeholder="输入查询关键字按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-select class="filter-item" style="width: 160px;" v-model="query.category" placeholder="分类筛选"
        @change="research" clearable>
        <el-option v-for="(item,index) in categoryOptions" :key="index" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem"
      @updateCell="updateCell">
      <template v-slot:content="v">
        <span v-if="v.key === 'key_part_no'">
          <a href="#" @click.stop="goDetail(v.row)" class="text-blue text-bold">{{ v.row[v.key] }}</a>
        </span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
const CATEGORY_OPTIONS = [
  { label: '原材料', value: 1 },
  { label: '产成品', value: 2 },
]
export default {
  mixins: [commonMixin],
  name: 'material',
  data: function () {
    return {
      api: this.$api.material,
      apiList: this.$api.material + 'getlist_v10',
      apiEdit: this.$api.material + 'add',
      name: '物料',
      columns: [
        { title: '物料编码', key: 'key_part_no', width: 140, fixed: 'left' },
        { title: '物料名称', key: 'key_part_name', width: 160, isEdit: true },
        { title: '分类', key: 'category', width: 80 },
        { title: '材料类型', key: 'key_part_type', width: 120 },
        { title: '所属机种', key: 'model_name', width: 140 },
        { title: '简码', key: 'brief_code', width: 100 },
        { title: '物料描述', key: 'key_part_desc', minWidth: 120, isEdit: true },
        { title: '单位码', key: 'unit_code', width: 60 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        { title: '物料编码', key: 'key_part_no', required: true, span: 12, props: {} },
        {
          title: '分类',
          required: true,
          key: 'category',
          span: 12,
          name: 'select',
          options: CATEGORY_OPTIONS,
          props: {},
        },
        { title: '材料类型', key: 'key_part_type', span: 12, props: { disabled: true } },
        {
          title: '所属机种',
          key: 'model_id',
          required: false,
          span: 12,
          name: 'select',
          options: [],
          props: { disabled: true, filterable: true },
        },
        { title: '物料名称', key: 'key_part_name', required: true, span: 12 },
        { title: '简码', key: 'brief_code', span: 12 },
        { title: '物料描述', key: 'key_part_desc', span: 24 },
        { title: '计量体系', key: 'unit_mode', span: 12 },
        { title: '单位码', key: 'unit_code', span: 12 },
        { title: '单位', key: 'unit_name', span: 12 },
        { title: '状态', key: 'status', span: 12, tips: '请输入单个字符' },
        { title: '安全库存', key: 'safty_inventory', span: 12, name: 'number', props: { min: 0 } },
        { title: 'Version', key: 'version', span: 12 },
        { title: '属性1', key: 'property1', span: 12 },
        { title: '属性2', key: 'property2', span: 12 },
        { title: '备注', key: 'remarks', span: 24 },
      ],
      query: {
        queryString: '',
        page: 1,
        size: 10,
      },
      initData: {
        key_part_no: '',
        key_part_type: '',
        category: '',
        model_id: '',
        erp_create_date: '',
        erp_modify_date: '',
      },
      categoryOptions: CATEGORY_OPTIONS,
    }
  },
  methods: {
    goDetail(row) {
      this.$router
        .push({
          name: 'materialInfo',
          params: {
            id: row.key_part_no,
          },
        })
        .catch(() => {})
    },
    formatList(list) {
      let tmp = _.cloneDeep(list)
      return tmp.map((i) => {
        i.category = i.category ? ['', '原材料', '产成品'][i.category] : ''
        return i
      })
    },
  },
  created: function () {
    this.getList()
    this.$request(this.$api.model + 'getlist', { page: 1, size: 999 }).then((r) => {
      this.setFieldOptions('model_id', r.list, 'id', ['model_code', 'model_name'])
    })
  },
  watch: {
    data: {
      handler(val, o) {
        this.getFieldConfig('key_part_no').props.disabled = !!val.id
        this.getFieldConfig('model_id').props.disabled = val.category != 2
        this.getFieldConfig('model_id').required = val.category == 2
        this.getFieldConfig('key_part_type').props.disabled = val.category != 1
        val.category == 1 || (this.data.key_part_type = '')
        val.category == 2 || (this.data.model_id = '')
      },
      deep: true,
    },
  },
}
</script>
<style scoped>
</style>
